<template>
	<div class="message_records">
		<div class="title"><span class="t_block"></span>留言板</div>
		<header>
			<textarea v-model="state.form.content" placeholder="在此输入您的留言"></textarea>
			<van-button class="submit" size="large" v-debounce="submit">提交</van-button>
		</header>

		<main>
			<div class="title"><span class="t_block"></span>回复历史</div>

			<van-list
				class="list"
				v-model:loading="state.loading"
				:finished="state.finished"
				finished-text="没有更多了"
				@load="getMessageRecords"
			>
				<div class="list_item" v-for="item of state.messageRecordList" :key="item.id">
					<h5>留言内容 {{item.content}}</h5>
					<span>{{item.add_time}}</span>
					<p><span>回复:</span>{{item.reply_content}}</p>
				</div>
			</van-list>
		</main>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { messageRecords, submitMessage } from '@/api/my';
import { useMainStore } from '@/store/index';
import { Toast } from 'vant';
import type { ToastOptions } from 'vant';
import {useRouter} from "vue-router";

const router = useRouter();
const mainStore = useMainStore();
const state = reactive<any>({
	pageInfo: {
		pageIndex: 1,
		pageSize: 10,
		user_id: mainStore.user_id
	},
	form: {
		user_id: mainStore.user_id,
		content: '',
		type: 0
	},
	messageRecordList: [],
	loading: false,
	finished: false
});

const submit = async ():Promise<void | ToastOptions> => {
  if (typeof mainStore.userInfo.audit_state != 'undefined' && mainStore.userInfo.audit_state != 1) {
    if (mainStore.userInfo.audit_state == 0) return Toast('您的资料正在审核中');
    if (mainStore.userInfo.audit_state == 2) return Toast('您的资料审核未通过');
  } else {
    if ((!mainStore.userInfo?.identity || mainStore.userInfo?.identity == '0')) {
      router.push('/registered');
      return;
    }
  }
	if (!state.form.content.trim()) return Toast('请输入留言');
	await submitMessage(state.form);
	Toast.success('提交成功');
	state.pageInfo.pageIndex = 1;
	state.messageRecordList = [];
	await getMessageRecords();
};

const getMessageRecords = async () => {
  if (mainStore.storeIsLogin) {
    state.pageInfo.user_id = mainStore.storeInfo.member.user_id
  }
	const res = await messageRecords(state.pageInfo);
	let { dataList } = res.data;
	if (dataList.length) {
		state.pageInfo.pageIndex++;
		state.messageRecordList = [...state.messageRecordList, ...dataList];
		state.loading = false;
	} else {
		state.finished = true;
	}
};
</script>

<style lang="scss" scoped>
.message_records {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 15px;
	box-sizing: border-box;
	header {
		@include flx-direction-center;
		width: 100%;
		height: 220px;
		margin-top: 15px;
		margin-bottom: 20px;
		background: #ffffff;
		border-radius: 10px;
		textarea {
			width: 100%;
			height: 130px;
			box-sizing: border-box;
			padding: 20px;
			border: none;
			line-height: 20px;
			font-size: 15px;
			color: #b5bbc0;
			resize: none;
		}
		.submit {
			width: 255px;
			height: 43px;
			background: linear-gradient(98deg, #f53d7d, #fb56b3);
			border-radius: 22px;
			font-size: 16px;
			color: #ffffff;
		}
	}
	.list {
		margin-top: 15px;
		.list_item {
			margin-bottom: 10px;
			padding: 20px;
			border-radius: 10px;
			background: #ffffff;
			h5 {
				font-size: 15px;
				font-weight: bold;
				color: #1a1a1a;
			}
			& > span {
				display: block;
				font-size: 13px;
				color: #999999;
				margin: 10px 0;
			}
			p {
				font-size: 13px;
				color: #4d4d4d;
				line-height: 21px;
			}
		}
	}
}
</style>
